<style scoped>
    .text-danger {
        margin: 0;
    }
</style>
<template>
    <div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
        <div class="modal-dialog" role="document" v-if="unit">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><i class="fa fa-cogs fa-fw" aria-hidden="true"></i>配置 {{ unit.label }}</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <template v-for="(value, key) in unit">
                            <div class="form-group" v-if="unit.getPropertyType(key) === 'string'">
                                <label :for="'setting-' + key" class="col-sm-2 control-label" >{{ key | translate }}</label>
                                <div class="col-sm-10">
                                    <input type="text" :id="'setting-' + key" class="k-textbox" v-model="unit[key]" style="width: 100%;">
                                    <p class="text-danger small"><strong>{{ errorMessage(key) }}</strong></p>
                                </div>
                            </div>

                            <div class="form-group" v-else-if="unit.getPropertyType(key) === 'range'">
                                <label :for="'setting-' + key" class="col-sm-2 control-label">{{ key | translate }}</label>
                                <div class="col-sm-10">
                                    <slider :id="'setting-' + key" v-model="unit[key]" :max="usableCols" style="width: 450px;"></slider>
                                    <p class="text-danger small"><strong>{{ errorMessage(key) }}</strong></p>
                                </div>
                            </div>

                            <div class="form-group" v-else-if="unit.getPropertyType(key) === 'boolean'">
                                <label :for="'setting-' + key" class="col-sm-2 control-label">{{ key | translate }}</label>
                                <div class="col-sm-10">
                                    <checkbox :id="'setting-' + key" v-model="unit[key]"></checkbox>
                                    <p class="text-danger small"><strong>{{ errorMessage(key) }}</strong></p>
                            </div>
                            </div>

                            <div class="form-group" v-else-if="unit.getPropertyType(key) === 'number'">
                                <label :for="'setting-' + key" class="col-sm-2 control-label" :class="{ 'text-danger': !unit.validate(key) }">{{ key | translate }}</label>
                                <div class="col-sm-10">
                                    <input type="text" :id="'setting-' + key" class="k-textbox" v-model.number="unit[key]" style="width: 100%;">
                                    <p class="text-danger small"><strong>{{ errorMessage(key) }}</strong></p>
                                </div>
                            </div>

                            <div class="form-group" v-else-if="unit.getPropertyType(key) === 'date'">
                                <label :for="'setting-' + key" class="col-sm-2 control-label" >{{ key | translate }}</label>
                                <div class="col-sm-10">
                                    <date-picker :id="'setting-' + key" v-model="unit[key]" ></date-picker>
                                    <p class="text-danger small"><strong>{{ errorMessage(key) }}</strong></p>
                                </div>
                            </div>

                        </template>





                        <!-- type -->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-type" class="col-sm-2 control-label">类型</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<select class="form-control" id="setting-type" v-model="unit.controlType">-->
                                    <!--<option value="textbox">文本</option>-->
                                    <!--<option value="radiobox">单选</option>-->
                                    <!--<option value="checkbox">多选</option>-->
                                    <!--<option value="dropdown">下拉框</option>-->
                                <!--</select>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; label &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-label" class="col-sm-2 control-label">标签</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<input type="text" id="setting-label" class="form-control" v-model="unit.label">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; col &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-col" class="col-sm-2 control-label">列宽</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<input type="num" id="setting-col" class="form-control" min="1" :max="selectedUnit.col" v-model.number="unit.col">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; extraClass &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-extraClass" class="col-sm-2 control-label">Class</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<input type="text" id="setting-extraClass" class="form-control" v-model="unit.extraClass">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; id &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-id" class="col-sm-2 control-label">Id</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<input type="text" id="setting-id" class="form-control" v-model="unit.id">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; placeholder &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-placeholder" class="col-sm-2 control-label">占位符</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<input type="text" id="setting-placeholder" class="form-control" v-model="unit.placeholder">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; defaultValue &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-defaultValue" class="col-sm-2 control-label">默认值</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<input type="text" id="setting-defaultValue" class="form-control" v-model="unit.defaultValue">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; helpText &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-helpText" class="col-sm-2 control-label">帮助文本</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<input type="text" id="setting-helpText" class="form-control" v-model="unit.helpText">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; visible &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-visible" class="col-sm-2 control-label">可见</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<checkbox id="setting-visible" v-model="unit.visible"></checkbox>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; disabled &ndash;&gt;-->
                        <!--<div class="form-group form-group-sm">-->
                            <!--<label for="setting-disabled" class="col-sm-2 control-label">禁用</label>-->
                            <!--<div class="col-sm-10">-->
                                <!--<checkbox id="setting-disabled" v-model="unit.disabled"></checkbox>-->
                            <!--</div>-->
                        <!--</div>-->
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-xs"
                            @click="resetCallback">重置
                    </button>
                    <button type="button" class="btn btn-primary btn-xs" @click="submit()" :disabled="!validateAll">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</template>
<script>
    import { mapGetters, mapActions } from 'vuex'
    import _ from 'lodash'
    import math from 'mathjs'
    import Checkbox from './utils/Checkbox.vue'
    import Slider from './utils/Slider.vue'
    import DatePicker from './utils/DatePicker.vue'

    export default {
        name: 'Modal',
        components: {
            Checkbox,
            Slider,
            DatePicker
        },
        data () {
            return {
                unit: null,
                validateAll: false
            }
        },
        computed: {
            ...mapGetters({
                isModalShow: 'isModalShow',
                selectedRow: 'selectedRow',
                selectedUnit: 'selectedUnit'
            }),
            usableCols () {
                if (_.isEmpty(this.unit)) {
                    return math.subtract(12, _.sumBy(this.selectedRow.units, unit => unit.col))
                } else {
                    return math.chain(12).subtract(_.sumBy(this.selectedRow.units, unit => unit.col)).add(this.unit.col).done()
                }
            }
        },
        watch: {
            isModalShow (newVal) {
                if (_.isBoolean(newVal) && newVal === true) {
                    $(this.$el).modal('show')
                    // 获得当前控件信息的深拷贝副本
                    this.unit = _.cloneDeep(this.selectedUnit)
                } else {
                    $(this.$el).modal('hide')
                    this.unit = null
                }
            },
            /**
             * 此处需要采用 watcher 的原因是校验所有字段的开销较大, 因此采用异步方式
             */
            unit: {
                handler () {
                    if (!_.isNil(this.unit)) {
                        this.unit.validateAll().then(res => {
                            this.validateAll = res
                        })
                    }
                },
                deep: true
            }
        },
        mounted () {
            $(this.$el).on('hidden.bs.modal', () => {
                // 隐藏模态框
                this.hideModal()
            })
        },
        methods: {
            ...mapActions({
                hideModal: 'hideModal',
                addAlertConfirm: 'addAlertConfirm',
                setUnit: 'setUnit'
            }),
            /**
             * 处理校验结果
             * @param key
             * @returns {*}
             */
            errorMessage (key) {
                const result = this.unit.validate(key)
                return result.code === 0 ? null : `${result.code}: ${result.message}`
            },
            /**
             * 提交操作
             */
            submit () {
                // 控件赋值
                this.setUnit(this.unit)
                // 隐藏模态框
                this.hideModal()
            },
            /**
             * 重置操作二次确认
             */
            resetCallback () {
                this.addAlertConfirm({
                    text: '确认重置该控件?',
                    style: 'warning',
                    callbacks: {
                        ok: {
                            callback: this.resetUnit
                        }
                    }
                })
            },
            /**
             * 重置
             */
            resetUnit () {
                // this.unit = _.cloneDeep(this.selectedUnit)
                const DynamicClass = Object.getPrototypeOf(this.unit)
                this.unit = new DynamicClass.constructor({ rowGid: this.unit.rowGid, unitGid: this.unit.unitGid })
            }
        }
    }
</script>
